<template>
  <div
    :class="$style.box"
    :style="{
      width: positionSize.w + 'px',
      height: positionSize.h + 'px'
    }"
  >
    <div
      :class="$style.cont"
      :style="{
        width:dpi.width + 'px',
        height:dpi.height + 'px',
      }"
    >
      <slot />
    </div>
  </div>
</template>

<script>
import dataApi from './v/data-api.js'
// import center from '@/modules/corejs/center/center.js'
import autoprefix from '@/modules/corejs/dom-css/autoprefix'
export default {
  data () {
    return {
      positionSize: {
        w: 0,
        h: 0,
        x: 0,
        y: 0
      }
    }
  },
  computed: {
    dpi () {
      return dataApi.core.dpi
    }
  },
  mounted () {
    this.on()
    this.positionSizeUpdate()
  },
  methods: {
    positionSizeUpdate () {
      let { dpi } = this
      let positionSize = this.positionSize = {
        w: window.innerWidth,
        h: window.innerHeight
      }
      this.$el.children[0].style[autoprefix('transform')] = `scale(${positionSize.w / dpi.width},${positionSize.h / dpi.height})`
    },
    on () {
      window.addEventListener('resize', this.positionSizeUpdate)
    },
    off () {
      window.removeEventListener('resize', this.positionSizeUpdate)
    }
  },
  destroyed () {
    this.off()
  }
}
</script>

<style module>
.box {
  position: absolute;
  left: 0;
  top: 0;
}
.cont {
  transform-origin: left top;
}
</style>
